<!--  -->
<template>
  <video class="video-body" ref="video" v-if="videoUrl" :width="videoWidth" preload :height="videoHeight" controls :key="videoUrl" :style="videoStyle" @loadedmetadata="infoback" @loadeddata="coverback">
    <source :src="videoUrl" type="video/mp4">
    <source :src="videoUrl" type="video/ogg">
    <source :src="videoUrl" type="video/webm">
    您的浏览器不支持 video 标签。
  </video>
  <p v-else class="video-empty" :style="videoStyle">暂无视频</p>
</template>

<script setup>
import { ref,toRefs, computed} from 'vue';
const props =defineProps({
  src: String,
  width: {
    default: 320,
    type: Number,
  },
  height: {
    default: 320,
    type: Number,
  },
  getInfo:{//是否获取视频信息，如尺寸，时长
    default: false,
    type: Boolean,
  },
  getCover:{//是否获取视频首帧
    default: false,
    type: Boolean,
  }
})
const emit = defineEmits(["info","cover"]);

let {src:videoUrl,width:videoWidth,height:videoHeight} = toRefs(props);

let videoStyle = computed(()=>{
  return {
    width: videoWidth.value+"px",
    height: videoHeight.value+"px",
  }
});

function coverback(e){
  if(!props.getCover) return;
  // 延迟300ms,防止视频未加载完成导致截取第一帧全黑的问题
  setTimeout(()=>{
    const video = e.target;
    if(!video){return;}
    let { videoWidth, videoHeight } = video;  // 获取video的宽高
    const imgWidth=videoWidth,imgHeight=videoHeight;  // 定义生成图片的宽高，其他宽高需求可以自己改
    let x = 0, y = 0, width = 0, height = 0;
    // 计算缩小后图片的宽高以及canvas绘制的位置信息
    if (videoWidth / videoHeight >= 1.5) {
      width = imgWidth ;
      height = videoHeight * (imgWidth / videoWidth);
      x = 0;
      y = (imgHeight- height) / 2;
    } else {
      height = imgHeight;
      width = videoWidth * (imgHeight / videoHeight);
      y = 0;
      x = (imgWidth - width) / 2;
    } 
    var canvas = document.createElement("canvas");
    canvas.width = imgWidth ;
    canvas.height = imgHeight;
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, imgWidth , imgHeight);
    ctx.drawImage(video, x, y, width, height);
    // let src = canvas.toDataURL("image/png"); // 完成base64图片的创建
    // const file = dataURLtoFile(src,"cover.png")
    let src = canvas.toDataURL("image/jpeg"); // 完成base64图片的创建
    const file = dataURLtoFile(src,"cover.jpg")
    emit("cover",file);
  },300)

}
function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
};
function infoback(e){
  if(!props.getInfo)return;
  let video =e.target;
  let duration = video.duration;
  let width = video.videoWidth;
  let height = video.videoHeight;
  let size = video.size;
  emit("info",{duration,width,height,size})
}
</script>

<style scoped lang="scss">
.video-body{
  background-color:#f5f7fa;;
}
.video-empty{
  background-color:#f5f7fa;
  color:#c0c4cc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>